import React, { useEffect, useState } from 'react';

const Index = (props) => {
	// 准备标题
	const [title, setTitle] = useState([]);
	// 高亮下标
	const [activeIndex, setActiveIndex] = useState(0)
	// 获取标题
	useEffect(() => {
		const data = props.children.map(v => v.props.title)
		setTitle(data)
	}, [])
	return (
		<div>
			<div className="title">
				{
					title.length > 0 && title.map((v, i) => {
						return <b key={i} 
							className={ i === activeIndex ? 'active': '' }
							onClick={ () => setActiveIndex(i) }
						>{v}</b>
					})
				}
			</div>
			{
				props.children.find((v, i) => i === activeIndex)
			}
		</div>
	);
}

Index.Tab = (props) => {
	return <div>
		{
			props.children
		}
	</div>
}

export default Index;
